
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test_flutter/common/style/common_style.dart';

///控件显示
class WidgetDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _WidgetDemoPage();
  }
}

class WidgetDemo2Page extends StatelessWidget {
  TabController? _tabController;
  var index = 0;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
//        leading: Text('返回'),
        title: Text(
          'StatelessWidgetDemo2',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: UIColors.common_color_black,

            ///字体颜色
            backgroundColor: Colors.white30,

            ///背景颜色
//            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold,

            ///加粗
            fontSize: 30,

            ///字号
            wordSpacing: 10,
            textBaseline: TextBaseline.ideographic,

            fontFamily: "yahei",

            ///字体
            // decoration: TextDecoration.underline,
            // decorationStyle: TextDecorationStyle.dashed
          ),
          maxLines: 2, // 限制两行
          textScaleFactor: 0.8,
        ),
        actions: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text(
              '删除',
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.end,
              style: TextStyle(backgroundColor: Colors.pink),
            ),
          ),
          InkWell(
            child: Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(left: 10, right: 10),
              color: Colors.blue,
              child: Text(
                '添加$index',
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.end,
                style: TextStyle(backgroundColor: Colors.pink),
              ),
            ),
            onTap: () {
              index++;
              print("点击添加:$index");
            },
          ),
          Icon(Icons.add)
        ],
      ),
//      body: Align(
////        child: Text('测试'),
//        child: FlutterLogo(
//          size: 100.0,
//          colors: Colors.orange,
//          style: FlutterLogoStyle.markOnly,
//        ),
//      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            // 空白区域
            Container(
              height: 200,
              color: Colors.red,
            ),

            // 文本控件
            TextWidget(),

            //  按钮
            ButtonWidget(),

            // 布局Row
            LayoutWidget(),

            // 输入框
            // EditWidget(),

            // 滑动框
            ScrollWidget(),
          ],
        ),
      ),

      // 网格布局
//      body: GridLayoutWidget(),

      // 列表布局
//      body: ListViewWidget(),

      // 线性布局和Row、Column类似
//      body: FlexLayoutWidget(),

      // 相对布局
//      body: StackLayoutWidget(),

      // 流式布局
//      body: WrapLayoutWidget(),

      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 50,
        ),
      ),
//      floatingActionButton: FloatingActionButton(
//        onPressed: () => print('点击事件'),
//        child: Icon(Icons.access_time),
//      ),
//      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    );
  }
}

class _WidgetDemoPage extends State<WidgetDemoPage>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;
  int index = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
//        leading: Text('返回'),
        title: Text(
          '标题栏',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: UIColors.common_color_black,

            ///字体颜色
            backgroundColor: Colors.white30,

            ///背景颜色
//            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold,

            ///加粗
            fontSize: 30,

            ///字号
            wordSpacing: 10,
            textBaseline: TextBaseline.ideographic,

            fontFamily: "yahei",

            ///字体
            // decoration: TextDecoration.underline,
            // decorationStyle: TextDecorationStyle.dashed
          ),
          maxLines: 2, // 限制两行
          textScaleFactor: 0.8,
        ),
        bottom: TabBar(
          controller: _tabController,
          tabs: <Widget>[
            Tab(text: '首页'),
            Tab(text: '分类'),
            Tab(text: '我的')
          ],
          onTap: ((int index) => {
            ///可以处理联动
                print(index)
          }),
        ),
        actions: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text(
              '删除',
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.end,
              style: TextStyle(backgroundColor: Colors.pink),
            ),
          ),
          Text(
            '保存',
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.end,
            style: TextStyle(backgroundColor: Colors.pink),
          ),
          InkWell(
            child: Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(left: 10, right: 10),
              color: Colors.blue,
              child: Text(
                '添加$index',
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.end,
                style: TextStyle(backgroundColor: Colors.pink),
              ),
            ),
            onTap: () {
              setState(() {});
              index++;
              print("点击添加$index");
            },
          ),
          Icon(Icons.add)
        ],

      ),
//      body: Align(
////        child: Text('测试'),
//        child: FlutterLogo(
//          size: 100.0,
//          colors: Colors.orange,
//          style: FlutterLogoStyle.markOnly,
//        ),
//      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            // 空白区域
            Container(
              height: 200,
              color: Colors.red,
            ),

            // 文本控件
            TextWidget(),

            //  按钮
            ButtonWidget(),

            // 布局Row
            LayoutWidget(),

            // 输入框
            // EditWidget(),

            // 滑动框
            ScrollWidget(),
          ],
        ),
      ),

      // 网格布局
//      body: GridLayoutWidget(),

      // 列表布局
//      body: ListViewWidget(),

      // 线性布局和Row、Column类似
//      body: FlexLayoutWidget(),

      // 相对布局
//      body: StackLayoutWidget(),

      // 流式布局
//      body: WrapLayoutWidget(),


      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 50,
        ),
      ),
//      floatingActionButton: FloatingActionButton(
//        onPressed: () => print('点击事件'),
//        child: Icon(Icons.access_time),
//      ),
//      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    );
  }
}

class WrapLayoutWidget extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return Wrap(
      spacing: 10,
      runSpacing: 10,
      alignment: WrapAlignment.end,
      children: <Widget>[
        Container(
          width: 150,
          height: 150,
          color: Colors.blue,
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.red,
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.yellow,
        ),
      ],
    );
  }

}

class StackLayoutWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
//    return Stack(
//      children: <Widget>[
//        Positioned(
//          left: 20,
//          top: 30,
//          child: Container(
//            width: 200,
//            height: 200,
//            color: Colors.red,
//          ),
//        ),
//        Positioned(
//          right: 20,
//          child: Container(
//            width: 300,
//            height: 100,
//            color: Colors.yellow,
//          ),
//        ),
//      ],
//    );
    return SizedBox(
      width: 250,
      height: 250,
       child: Stack(
         children: <Widget>[
           Container(
             width: 250,
             height: 250,
             color: Colors.white,
           ),
           Container(
             padding: EdgeInsets.all(5.0),
            alignment: Alignment.bottomCenter,
             decoration: BoxDecoration(
               gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: <Color>[
                  Colors.black.withAlpha(0),
                  Colors.black12,
                  Colors.black45
                ],
              ),
             ),
             child: Text(
               "Foreground Text",
               style: TextStyle(color: Colors.white, fontSize: 20.0),
             ),
           ),
         ],
       ),
     );
  }

}

class FlexLayoutWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Container(
//            height: 300,
            color: Colors.blue,
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
//            height: 300,
            color: Colors.red,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
//            height: 300,
            color: Colors.yellow,
          ),
        ),
      ],
    );
  }

}

class ListViewWidget extends StatelessWidget{

  final List<String> entries = ['a', 'b', 'c'];

  @override
  Widget build(BuildContext context) {
//    return ListView.builder(
//      itemCount: entries.length,
//      itemBuilder: (BuildContext context, int index){
//        return Container(
//          height: 50,
//          child: Text(entries[index]),
//        );
//      },
//    );
    return ListView.separated(
      padding: EdgeInsets.all(10),
      itemBuilder: (BuildContext context, int index) {
        return TextButton(
          child: Text(entries[index]),
          onPressed: () => {

          },
        );
      },
      separatorBuilder: (BuildContext context, int index) => Divider(),
      itemCount: entries.length,
    );
  }

}

class GridLayoutWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        childAspectRatio: 1
      ),
      children: <Widget>[
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
        Text('5'),
        Text('6'),
        Text('7'),
        Text('8'),
      ],
    );

//    return GridView.count(crossAxisCount: 2,
//      primary: false,
//      padding: EdgeInsets.all(10),
//      mainAxisSpacing: 10,  // 上下间距
//      crossAxisSpacing: 10, // 左右间距
//      children: <Widget>[
//        Container(
//          color: Colors.teal[100],
//          child: Text('1'),
//        ),
//        Container(
//          color: Colors.teal[200],
//          child: Text('2'),
//        ),
//        Container(
//          color: Colors.teal[300],
//          child: Text('3'),
//        ),
//        Container(
//          color: Colors.teal[400],
//          child: Text('4'),
//        ),
//        Container(
//          color: Colors.teal[500],
//          child: Text('5'),
//        ),
//        Container(
//          color: Colors.teal[600],
//          child: Text('6'),
//        ),
//        Container(
//          color: Colors.teal[700],
//          child: Text('7'),
//        ),
//      ],
//    );
  }

}

class ScrollWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Scrollbar(
          child: Container(
            height: 100,
            color: Colors.yellow,
            child: Column(
              children: <Widget>[
                Text('标题'),
                Container(
                  height: 50,
                  color: Colors.blue,
                ),
                Text('底部'),
              ],
            ),
          ),
        ),
      ],
    );
  }

}

class LayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 300,
          height: 100,
          color: Colors.white,
        ),
        Container(
          width: 300,
          height: 100,
          color: Colors.white,
        ),
//         Row(
//           crossAxisAlignment: CrossAxisAlignment.center,
//           mainAxisAlignment: MainAxisAlignment.spaceBetween,
//           children: <Widget>[
//             FlutterLogo(),
//             Flexible(
//               fit: FlexFit.loose,
//               child: Text('哈哈哈哈附近地fdfjdjdklfjkld分居考虑得'),
//             ),
// //              Expanded(
// //                child: Text('ok'),
// //              ),
//             Icon(Icons.shopping_cart),
//           ],
//         ),
//
//         // 布局Container
//         Row(
//           children: <Widget>[
//             Container(
//               color: Colors.red,
//               alignment: Alignment.center,
//               padding: EdgeInsets.only(left: 10),
//               margin: EdgeInsets.only(left: 20),
//               width: 80,
//               height: 40,
//               child: Text('包裹内容'),
//               transform: Matrix4.rotationZ(0.1),
//             ),
//           ],
//         ),
      ],
    );
  }

}

class ButtonWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // FlatButton: 一种没有阴影材质设计的按钮
    // DropdownButton: 一个按钮，显示要选择的选项。
    // FloatingActionButton: 材质应用程序中的圆形按钮。
    // IconButton：创建仅包含图标的按钮。
    // InkWell：实现了平面按钮的墨水飞溅部分.
    // RawMaterialButton:Widget所基于的Widgets.
    // OutlineButton：只有边框的按钮。
    return Row(
      children: <Widget>[
        TextButton(
          child: Text('FlatButton'),
          onPressed: (() => {
            print("FlatButton onPressed")
          }),
        ),
//              DropdownButton(
//                hint: Text("请选择"),
//              ),
//              InkWell(
//                child: Icon(Icons.open_in_new),
//              ),
        TextButton(
          onPressed: (){},
          child: Text('哈哈'),
          style: ButtonStyle(
              padding: MaterialStateProperty.all(EdgeInsets.all(6))
          ),
        ),
        TextButton(
          child: Text('点击'),
          onPressed: () {},
        ),
//        FloatingActionButton(
//          child: Text('点击事件'),
//          onPressed: (){},
//        ),
        InkWell(
          onTap: () => {print("click")},
          child: Text('click'),
        ),
        IconButton(
          icon: Icon(Icons.access_alarms),
          onPressed: () => {print("click")},
        )
      ],
    );
  }

}

class TextWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        /// DefaultTextStyle设置默认样式，该节点下子树中所有文本都会使用该样式
        /// 单独设置则不受影响
        DefaultTextStyle(
          style: TextStyle(color: Colors.amber),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              /// 文本对齐方式
              Container(
                ///Container容器很有用，可以设置位置和背景
                alignment: Alignment.centerRight,
                color: Colors.pink,
                child: Text(
                  "hello word!",
                  textAlign: TextAlign.end,
                ),
              ),

              /// 单行显示，溢出显示省略号
              Text(
                "hello word!" * 10,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),

              /// TextStyle:设置字体颜色，背景，字体大小等
              Text("hello word",
                  style: TextStyle(
                      color: Colors.white,
                      backgroundColor: Colors.black,
                      decoration: TextDecoration.underline,/// 设置下划线
                      decorationStyle: TextDecorationStyle.dotted, /// 下划线样式:点点还是分割线
                      height: 1.2, /// height:行高因子，具体行高是fontSize*height
                      fontSize: 15)),
            ],
          ),
        ),


        /// TextSpan设置显示不同样式的文字
        Text.rich(TextSpan(
            children: [
              TextSpan(
                  text: "我",
                  style: TextStyle(color: Colors.yellow)
              ),
              TextSpan(
                  text: "是单身狗",
                  style: TextStyle(color: Colors.red, fontSize: 30)
              ),
              TextSpan(
                text: 'https://www.996icu.com',
            ),
            ],
        )),

        Row(
          children: <Widget>[
            Container(
              color: Colors.yellow,
              child: Icon(Icons.favorite),
            ),
            // 图标控件
            Icon(Icons.favorite,
              color: Colors.red,
              size: 40,
            ),
            /// asset：加载本地资源，注意路径不要写错了
            Image.asset("static/images/ic_approval_creator_s.png",
              width: 80,
              height: 80,
              fit: BoxFit.none,
              color: Colors.red,
            ),
            /// network：加载网络图片
            /// fit：BoxFit.fill：拉伸匹配宽高，BoxFit.fitWidth：缩放匹配宽度，BoxFit.fitHeight：缩放匹配高度
            Image.network("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3801614608,429228614&fm=26&gp=0.jpg",
              width: 200,
              height: 80,
              fit: BoxFit.cover,
//                color: Colors.pink,
              alignment: Alignment.centerRight,
              colorBlendMode: BlendMode.darken,
            ),
          ],
        ),
      ],
    );
  }
}


class EditWidget extends StatelessWidget{

  final _formKey = GlobalKey<FormState>();

  final _TextEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
//    _TextEditingController.addListener(() {
//      print(_TextEditingController.text);
//    });
    return Column(
      children: <Widget>[
        Container(
          child: Form(
            key: _formKey,
            child: Column(
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(
                    hintText: '请输入用户名',
                    labelText: '13212345678',
                  ),
                  onChanged: (val){
                    print(val);
                  },
                  /// 校验规则
                  validator: (value) {
                    if(value?.isEmpty == true) {
                      return '用户名不能为空';
                    }
                    return null;
                  },
                ),
                TextButton(
                  child: Text('提交'),
                  onPressed: (){
                    print(_TextEditingController.text);
                    print(_formKey.toString());
                    print(_formKey.currentState?.validate());
//                        if(_formKey.currentState.validate()) {
//
//                        }
                  },
                ),
              ],
            ),
          ),
        ),
        TextField(
          controller: _TextEditingController,
          autofocus: false,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            hintText: '请输入密码'
          ),
          onChanged: (val){
            print(val);
          },
        ),
      ],
    );
  }
}
